<template>
  <div class="detail-data">
    <el-tabs v-model="activeName">
      <el-tab-pane label="设备历史状态" name="1">
        <div class="title">
          <div class="label">选择时间：</div>
          <el-date-picker
            v-model="value"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
          <el-button type="primary" class="search-btn" @click="search">查询</el-button>

          <div class="label">温度阈值：</div>
          <el-col :span="2">
            <el-input v-model="tempThreshold" placeholder="温度阈值"></el-input>
          </el-col>

          <el-button type="primary" class="search-btn">设置</el-button>
        </div>

        <div id="container2"></div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { DualAxes } from "@antv/g2plot";
import { dateFormat } from "../utils/utils";

export default {
  props: ["device"],
  data() {
    return {
      value: "",
      activeName: "1",
      historyData: [],
      startDate: "",
      endDate: "",
      tempThreshold: 0,
      line: null
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      this.$http
        .get(
          "/v1/devicePropHistoryLog/list?deviceName=device2023&startDate=" +
            this.startDate +
            "&endDate=" +
            this.endDate
        )
        .then(res => {
          this.historyData = res.data.map(item => {
            return {
              date: item.gmtCreate,
              temp: item.currentTemperature,
              hum: item.currentHumidity
            };
          });
          if (this.line) {
            this.line.changeData([this.historyData, this.historyData]);
          } else {
            this.line = new DualAxes("container2", {
              data: [this.historyData, this.historyData],
              xField: "date",
              yField: ["temp", "hum"]
            });
            this.line.render();
          }
        });
    },
    search() {
      this.startDate = dateFormat(this.value[0], "yyyy-MM-dd");
      this.endDate = dateFormat(this.value[1], "yyyy-MM-dd");
      this.getData();
    }
  },
  watch: {
    device(newValue, oldValue) {
      this.tempThreshold = newValue.tempThreshold;
    }
  }
};
</script>

<style scoped>
.detail-data {
  padding: 20px;
}
.title {
  display: flex;
  justify-content: start;
}
.label {
  line-height: 36px;
  margin-right: 20px;
}
.search-btn {
  margin: 0 20px;
}
</style>